<template>
	<div class="Insurance-billing-record-info">
		<div class="main_content">
			<div class="main_content_title">
				<div class="left">
					<template v-for="(item, index) in $route.meta.title">
						<span v-if="languageId === item.langId">{{ item.name }}</span>
					</template>
				</div>
				<div class="right">
				</div>
			</div>
			<div class="main_content_con">
				<el-form ref="info" :model="info" label-width="auto" class="demo-ruleForm">
					<div class="content_info">
						<el-row :gutter="24">
							<el-col :span="8">
								<el-form-item :label="$t('formLabel.latentName')">
									<el-input readonly :value="info.latentName" />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item :label="$t('formLabel.latentPhone')">
									<el-input readonly :value="info.latentPhone" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="8">
								<el-form-item :label="$t('formLabel.insuranceName')">
									<el-input readonly :value="info.insuranceName" />
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item :label="$t('formLabel.insureTime')">
									<el-input readonly :value="info.insureTime" />
								</el-form-item>
							</el-col>
						</el-row>
						<template v-for="(item, index) in info.inventories" v-if="info.inventories">
							<div class="line" />
							<el-row :gutter="24" :key="index">
								<el-col :span="8">
									<el-form-item
										:label="item.insureType === 1 ? $t('formLabel.insurance_ct') : item.insureType === 2 ? $t('formLabel.insurance_c') : $t('formLabel.insurance_or')">
										<el-input readonly :value="item.insureAmt">
											<template slot="append">{{ $t('text.priceUnit') }}</template>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.validStart')">
										<el-input readonly :value="item.validStart + $t('text.to') + item.validEnd" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.insureImg')">
										<div class="boxIgmContent">
											<div class="imgBox" v-for="(img, index) in item.insureImg" :key="index">
												<div class="avatar-uploader">
													<upload-img :preview="true" :defsrc="img" disabled />
												</div>
											</div>
										</div>
									</el-form-item>
								</el-col>
							</el-row>
						</template>
					</div>
					<div class="footerBtn">
						<el-button @click="getCancle">{{ $t('el.popconfirm.close') }}</el-button>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>
<script>
// import { getInsureInfo } from '@/api/commercial-vehicle-sales'
import UploadImgSimple from '@/components/Upload/UploadImgSimple'

export default {
	name: '',
	components: {
		UploadImg: UploadImgSimple
	},
	data() {
		return {
			info: {}
		}
	},
	computed: {
		languageId() {
			// 固定语种ID  1:中文  2:英文 3:俄文 4:乌语
			return this.$store.getters.languageId
		}
	},
	watch: {},
	mounted() {
		window._vm = this
		this.propUpType = this.$route.query.propUpType
		// this.getInfo(this.$route.query.id)
	},
	created() { },

	activated() { },
	destroyed() { },
	methods: {
		// 详情
		getInfo(id) {
			getInsureInfo(id).then(res => {
				if (res.code === 200) {
					var obj = res.data
					if (obj.inventories) {
						obj.inventories.forEach(i => {
							if (i.insureImg) {
								i.insureImg = i.insureImg.split(',')
							} else {
								i.insureImg = []
							}
						})
					}
					this.info = obj
				}
			})
		},
		// 取消
		getCancle() {
			this.$store.state.tagsView.visitedViews.splice(
				this.$store.state.tagsView.visitedViews.findIndex(
					item => item.path === this.$route.path
				),
				1
			)
			this.$router.go(-1)
		}
	}
}
</script>
<style lang="scss" scoped>
.Insurance-billing-record-info {
	height: 100%;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;

	&>.main_content {
		width: 99.9%;
		height: 100%;

		&>.main_content_title {
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.main_content_con {
			height: calc(100% - 40px);
			width: 100%;
			display: inline-block;
			border: 1px solid #dfe6ec;
			padding: 20px;
			overflow: hidden;

			&>.el-form {
				width: 100%;
				height: 100%;

				&>.content_info {
					width: 100%;
					height: calc(100% - 40px);
					overflow: hidden;
					overflow-y: auto;
				}

				::v-deep th {
					padding: unset;
					background-color: #f2f2f2;
					line-height: 40px;
				}

				.footerBtn {
					width: 100%;
					display: flex;
					justify-content: center;
				}
			}

			.line {
				height: 1px;
				margin-bottom: 25px;
				background: #ebeef5;
			}

			.el-button:hover,
			.el-button:focus {
				color: #000;
			}
		}
	}
}
</style>
